<template >
   <Teleport to=".sdy-header">
    <van-nav-bar :title="title" :left-arrow="back">
        <template #left>
        <slot name="left">
         <van-icon class="back-btn" name="arrow-left" />
        </slot>
    </template>
        <template #title>
        <slot name="title">{{title}}</slot>
    </template> 
    <template #right>
        <slot name="right"></slot>
    </template>
    </van-nav-bar>
</Teleport>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';

interface MyTopBar {
    title:string
    back?:boolean
}
defineProps< MyTopBar>()
</script>
<style scoped lang="scss">
// 覆盖样式
:deep(.van-nav-bar__content) {
  background-color: #c72418;
}
.back-btn{
    font-size: 24px;
    color:black!important;
}
</style>